<template>
  <view class="container">
    <image class="loginBg" src="/static/images/loginBg.png" mode="aspectFill"></image>
    <view class="main">
      <!-- 表单 -->
      <view class="from-warp">
        <view class="from-warp-item" style="margin-bottom: 50rpx;">
          <image class="ipt_icon" src="../../static/images/phone_icon.png" mode=""></image>
          <input class="ipt_linner" type="number" maxlength="11" placeholder-class="styles" placeholder="请输入手机号"
            v-model="fromLine.phone" />
        </view>
        <view class="from-warp-item">
          <image class="ipt_icon" src="../../static/images/code_icon.png" mode=""></image>
          <input class="ipt_linner" type="text" placeholder-class="styles" placeholder="请输入验证码" v-model="fromLine.captcha" />
          <view class="code_label" @click="sendCode" v-if="!btnDisabled">
            获取验证码
          </view>
          <view class="code_label" v-if="btnDisabled">
            {{ countdown + " " + "s" }}
          </view>
        </view>
        <view class="from-warp-desc">
          未注册的手机号登录后将自动注册
        </view>
      </view>
      <!-- 协议 -->
      <view class="xieyi">
        <image class="round_icon" src="../../static/images/round_active.png" mode=""></image>
        已阅读并同意<text class="xieyi_label">《用户协议》</text>和<text class="xieyi_label">《隐私协议》</text>
      </view>
      <!-- 登录 -->
      <view class="login_btn" @click="handleLogin">登录</view>
      <view class="loginType">
        <view class="loginType-item" @click="toPage">
          <image class="wechat_login_icon" src="../../static/images/wechat_login.png" mode=""></image>
          <view class="wechat_login_label">微信登录</view>
        </view>
        <view class="loginType-item">
          <image class="wechat_login_icon" src="../../static/images/phone_login.png" mode=""></image>
          <view class="wechat_login_label">手机号登录</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        fromLine: {
          phone: "",
          captcha: ""
        },
        btnDisabled: false,
        timer: null,
        countdown: 0,
      }
    },
    methods: {
      toPage() {
        uni.navigateTo({
          url: "/pages/login/register"
        })
      },
      toChangePage() {
        uni.navigateTo({
          url: "/pages/login/changeShop"
        })
      },
      // 发送验证码
      sendCode() {
        if (!this.fromLine.phone) {
          uni.showToast({
            title: "请输入手机号",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        reqApi.sendMsg({
          phone: this.fromLine.phone
        }).then(res => {
          uni.showToast({
            title: "验证码发送成功",
            duration: 1500,
            icon: 'none',
            mask: true
          })
          this.countdown = 60;
          this.btnDisabled = true;
          if (this.timer) clearInterval(this.timer);
          this.timer = setInterval(() => {
            if (this.countdown > 0) {
              this.countdown -= 1;
            } else {
              clearInterval(this.timer);
              this.timer = null;
              this.btnDisabled = false;
            }
          }, 1000);
        })
      },
      handleLogin(){
        reqApi.login(this.fromLine).then(res=>{
          console.log("res", res);
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #EA7222 0%, rgba(234, 214, 34, 0) 100%);
    position: relative;
    padding: 88rpx 30rpx;
    box-sizing: border-box;

    .loginBg {
      width: 100%;
      height: 476rpx;
    }

    .main {
      .from-warp {
        padding: 60rpx 40rpx;
        background: #fff;
        border-radius: 60rpx;
        box-sizing: border-box;
        margin-top: 15rpx;

        .from-warp-item {
          display: flex;
          align-items: center;
          width: 100%;
          height: 104rpx;
          background: #F7F8FA;
          border-radius: 30rpx;
          padding: 0 30rpx;
          box-sizing: border-box;

          .ipt_icon {
            width: 36rpx;
            height: 36rpx;
          }

          .ipt_linner {
            flex: 1;
            font-weight: 400;
            font-size: 28rpx;
            color: #222;
            padding: 0 40rpx;
            box-sizing: border-box;
          }

          .code_label {
            font-weight: 400;
            font-size: 24rpx;
            color: #FF0000;
          }
        }

        .from-warp-desc {
          font-weight: 400;
          font-size: 24rpx;
          color: #EA2222;
          padding: 30rpx 30rpx 0 30rpx;
          box-sizing: border-box;
        }
      }

      .xieyi {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
        margin-top: 80rpx;
        justify-content: center;

        .round_icon {
          width: 40rpx;
          height: 40rpx;
        }

        .xieyi_label {
          color: #EA7222;
        }
      }

      .login_btn {
        width: 100%;
        height: 88rpx;
        background: linear-gradient(270deg, #FF3C21 0%, #EA7222 100%);
        box-shadow: 0rpx 16rpx 20rpx 0rpx rgba(244, 88, 33, 0.2);
        border-radius: 48rpx;
        font-weight: bold;
        font-size: 32rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 88rpx;
        margin-top: 44rpx;
      }

      .loginType {
        display: flex;
        justify-content: space-between;
        margin-top: 78rpx;

        .loginType-item {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 312rpx;
          height: 96rpx;
          background: #FFFFFF;
          border-radius: 56rpx;
          padding: 0 30rpx;
          box-sizing: border-box;

          .wechat_login_icon {
            width: 48rpx;
            height: 48rpx;
            margin-right: 10rpx;
          }

          .wechat_login_label {
            font-weight: 400;
            font-size: 28rpx;
            color: #000000;
          }
        }
      }
    }
  }
</style>